<template>
  <template v-if="item.children">
    <el-table-column :key="item.key" :label="item.label" align="center">
      <column v-for="child in item.children" :item="child" :key="child.key" />
    </el-table-column>
  </template>
  <el-table-column
    v-else-if="item.formatter"
    :label="item.props.label"
    :min-width="columnWidth ?? 120"
    align="center"
    :formatter="item.formatter"
    :sortable="sortable"
    :prop="item.props.prop"
    show-overflow-tooltip
  />
  <el-table-column
    v-else
    :label="item.props.label"
    align="center"
    :min-width="columnWidth ?? 120"
    :prop="item.props.label"
    :sortable="sortable"
    show-overflow-tooltip
  >
    <template #default="scope">
      <!-- 选择类型  -->
      <span v-if="item.props.type === 'option'">{{ handleOption(scope.row) }}</span>
      <!-- 字符串 -->
      <span v-else>{{ scope.row[item.props.prop] }}</span>
      <!-- 字符串 -->
      <!-- <span v-else-if="item.type === 'string'">{{ scope.row[item.key] }}</span> -->
      <!-- 机构 -->
      <!-- <span v-else-if="item.type === 'org'">{{ handleOrg(scope.row) }}</span> -->
      <!-- 进度条 -->
      <!-- <span v-else-if="item.type === 'progress'">
        <table-progress :value="scope.row[item.key]" />
      </span> -->
    </template>
  </el-table-column>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { find, get } from 'lodash'
import { ObjectType } from 'typings/interfaces'

export default defineComponent({
  name: 'ColumnData',
  props: {
    item: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      required: true,
    },
  },
  components: {},
  setup(props) {
    const handleOption = (row: ObjectType) => {
      const key = get(props.item.props, 'prop', '')
      const value = get(find(props.options[key], { itemValue: get(row, key, '') }), 'itemText')
      return value
    }

    return {
      columnWidth: props.item?.props.width,
      sortable: computed(() => (props.item.props.sortable ? 'custom' : false)),
      handleOption,
    }
  },
})
</script>
